<%- include("common/header.ejs")%>
    <div class="container col-xs-6 col-xs-offset-3">
        <h1>笔记列表</h1>
        <ul class="list-group">
            <% for(let i = 0; i < notes.length; i++){ %>
            <li _id="<%=notes[i]._id%>" class="list-group-item"><span><%= notes[i].title %></span> <a href="javascript:;" _id="<%=notes[i]._id%>" class="pull-right del" style="margin-left:8px;">删除</a><a href="/note/edit/<%=notes[i]._id%>" class="pull-right">编辑</a></li>
            <%}%>
           
          </ul>
    </div>
    
<%- include("common/footer.ejs")%>
<script>
    $('.list-group li .del').click(function(){
        // let _id = this.getAttr('_id');
        let _id = $(this).attr('_id');
        $.get('/note/ajax_delete',{_id:_id},(data)=>{
            if(data.code === 0){
                $(this).parent('li').remove();
            }
        },'json')
    })

    $('.list-group li').dblclick(function(){
        let that = $(this);
        if($(this).find('input')[0]){
            return;
        }
        let text = $(this).find('span').html();
        $(this).find('span').html(`<input type='text' value='${text}'/>`);
        $(this).find('span input').select().focus();
        $(this).find('span input').blur(function(){
            let title = $(this).val();
            let _id = $(this).parent().parent().attr('_id');
            $.get('/note/ajax_edit',{_id,title},(data)=>{
                
                if(data.code==0){
                    that.find('span').html(title);
                }
            },'json')
        })
    })

</script>